import React, { Component } from 'react';

import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Alert,
    Image,
    TouchableOpacity
} from 'react-native';

var Dimensions = require('Dimensions');

var {width} = require('Dimensions').get('window');

var {height} = require('Dimensions').get('window');

export default class ScanQRCode extends Component{

    static navigationOptions = ({navigation,screenProps}) => ({
        headerTitle:'Scan QR Code',
    });

    render(){
        return(
            <View style={styles.baseViewStyle}>
                <Image
                    style={styles.innerImageStyle}
                    source={require('../img/hs5s.png')}
                />
                <Text style={styles.titleTextStyle}>
                    Scan QR code on the back of the Scale
                </Text>

                <TouchableOpacity style={styles.buttonStyle}
                                  activeOpacity={0.5}
                                  onPress={() => this.props.navigation.navigate('SmartBarCode')}
                >
                    <Text style={{color:'white'}}>
                        Scan QR Code
                    </Text>
                </TouchableOpacity>


            </View>
        )
    }

};

const styles = StyleSheet.create({

    baseViewStyle:{
        flexDirection:'column',
        justifyContent:'flex-start',
        alignItems:'center'
    },

    innerImageStyle:{
        width:width/2.2,
        height:width/2.2,
        resizeMode:'contain',
        marginTop:50
    },

    titleTextStyle:{
        fontSize:17,
        textAlign:'center',
        margin:10,
        color:'#696969',
        marginTop:80,
        width:width/1.2
    },

    buttonStyle:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        width:width/1.2,
        height:35,
        backgroundColor:'#1E90FF',
        borderRadius:5,
        marginTop:50,


    }

});
